<style lang="scss">
  @import "../../utils/base.scss";
</style>
<template>
  <div class="quest_content" style="overflow-y:auto">
    <!-- <div class="qheader" style="border-bottom: 1px solid rgb(210,210,210);">
            <p>基本信息</p>
        </div> -->
    <div class="gcontent">
      <Form ref="accountInfo" :model="accountInfo" :rules="accountInfoValidate" :label-width="labelWidth"
        label-position="left" class="form form_left">
        <Row>
          <Col span="8">
          <FormItem label="申请人:">
            <Input v-model="accountInfo.userName" :readonly="true" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
          <FormItem label="提单租户：" prop="roleId">
            <Select v-model="accountInfo.roleId" @on-change="setProjectList" :disabled="ifedit">
              <Option :value="i.id" v-for="(i,index) in roleList" :key="index">{{i.role_name}}</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="8" class="col_left">
          <FormItem label="关联项目：" prop="projectId">
            <Select v-model="accountInfo.projectId" :disabled="ifedit">
              <Option :value="item.id" v-for="(item,index) in projectList" :key="index">{{item.project}}</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width:96.666667%">
          <FormItem label="申请描述:" prop="reqDes">
            <Input v-model="accountInfo.reqDes" :readonly="ifedit" placeholder="请描述申请原因及用途" type="textarea" :autosize="{minRows: 4,maxRows: 6}" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="22" style="width:96.666667%">
          <Table :columns="columns" :data="accountInfo.accountList" border>
            <template slot-scope="{ row, index }" slot="count">
              <p>{{index + 1}}</p>
            </template>
            <template slot-scope="{ row, index }" slot="fourA">
              <p v-if="ifedit">{{row.fourA}}</p>
              <Input v-else v-model="row.fourA" type="text" :readonly="ifedit" />
            </template>
            <template slot-scope="{ row, index }" slot="memberName">
              <p v-if="ifedit">{{row.memberName}}</p>
              <Input v-else v-model="row.memberName" type="text" :readonly="ifedit" />
            </template>

            <template slot-scope="{ row, index }" slot="rbdi">
              <p v-if="ifedit">{{row.rbdi == 1?'是':'否'}}</p>
              <Select v-else v-model="row.rbdi" :transfer="true" :disabled="ifedit">
                <Option value="1">是</Option>
                <Option value="0">否</Option>
              </Select>
            </template>
            <template slot-scope="{ row, index }" slot="rhadoop">
              <p v-if="ifedit">{{row.rhadoop == 1?'是':'否'}}</p>
              <Select v-else v-model="row.rhadoop" :transfer="true" :disabled="ifedit">
                <Option value="1">是</Option>
                <Option value="0">否</Option>
              </Select>
            </template>
            <template slot-scope="{ row, index }" slot="rpaas">
              <p v-if="ifedit">{{row.rpaas == 1?'是':'否'}}</p>
              <Select v-else v-model="row.rpaas" :transfer="true" :disabled="ifedit">
                <Option value="1">是</Option>
                <Option value="0">否</Option>
              </Select>
            </template>
            <template slot-scope="{ row, index }" slot="ruap">
              <p v-if="ifedit">{{row.ruap == 1?'是':'否'}}</p>
              <Select v-else v-model="row.ruap" :transfer="true" :disabled="ifedit">
                <Option value="1">是</Option>
                <Option value="0">否</Option>
              </Select>
            </template>
            <template slot-scope="{ row, index }" slot="relse">
              <p v-if="ifedit">{{row.relse}}</p>
              <Input v-else v-model="row.relse" type="text" :readonly="ifedit" />
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button @click="deleteRow(row, index)" :disabled="ifedit || accountInfo.accountList.length < 2">删除</Button>
            </template>

          </Table>
          </Col>
        </Row>
        <!-- 附件 -->
        <div style="padding-top: 50px">
          <Row v-if="!ifedit">
            <Col span="3">
            <Upload :action="fileUrl + '/file'" :headers="httpHeader" :max-size="10240" :on-exceeded-size="outFileSize"
              :show-upload-list="false" :on-success="handleUpload">
              <Button icon="ios-cloud-upload-outline">选择文件</Button>
            </Upload>
            </Col>
            <Col span="5">
            <Button icon="ios-cloud-download-outline" @click="downloadFile">点击下载模板</Button>
            </Col>
          </Row>
          <Row class="form_left " v-if="!ifedit" v-for="(item,index) in  accountInfo.files" :key="index">
            <Tag :name="index" closable @on-close="delFiles">{{item.fileName}}</Tag>
          </Row>
          <template v-for="i in accountInfo.files" v-else>
            <Row class="form_left ">
              <Icon type="ios-link" size="15" /><a href="javascript:void(0)" @click="downLoad(i)" style="padding-left:5px;padding-inline-end: 20px;font-size:14px">{{i.fileName}}</a>
            </Row>
          </template>
        </div>
      </Form>
    </div>
    <!-- 附件模板 -->
    <Modal v-model="showFileMould" @on-ok="showFileMould = false" title="附件模板" :mask-closable="false" footer-hide>
      <template v-if="filesList != undefined && filesList != null &&  filesList.length > 0">
        <List v-for="(item,index) in filesList" :key="index">
          <a href="javascript:void(0)" @click="downLoad(item)">
            <ListItem>
              <ListItemMeta>
                <template slot="title">
                  <p>{{(index + 1) + '、' + item.fileName}}</p>
                </template>
              </ListItemMeta>
            </ListItem>
          </a>
        </List>
      </template>
      <div v-else class="gcontent" style="text-align:center">
        <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无附件模板</span>
      </div>
    </Modal>
    <div style="height: 60px;" />

  </div>
</template>
<script>
  import ajax from "../../ajax_util"
  import Axios from 'axios'
  export default {
    name: "account",
    components: {

    },
    data() {
      return {
        showFileMould: false,
        httpHeader: {
          Authorization: this.$store.state.token
        },
        fileUrl: this.CONFIG.file_url,
        labelWidth: 140,
        accountInfoValidate: {
          roleId: [{
            required: true,
            type: 'number',
            message: '请选择租户角色',
            trigger: 'change'
          }, ],
          projectId: [{
            required: true,
            type: 'number',
            message: '请选择关联项目',
            trigger: 'change'
          }, ],
          reqDes: [{
            required: true,
            type: 'string',
            message: '请填写申请描述',
            trigger: 'blur'
          }, ],
        },
        columns: [{
            title: "序号",
            align: "center",
            width: 70,
            key: "count",
            slot: "count",
          },
          {
            title: "4A账号",
            align: "center",
            // width: 180,
            key: "fourA",
            slot: "fourA"
          },
          {
            title: "成员名称",
            align: "center",
            // width: 120,
            key: "memberName",
            slot: "memberName"
          },
          {
            title: "是否开通BDI",
            align: "center",
            width: 150,
            key: "rbdi",
            slot: "rbdi"
          },
          {
            title: "是否开通hadoop",
            align: "center",
            width: 150,
            key: "rhadoop",
            slot: "rhadoop"
          },
          {
            title: "是否开通Pass",
            align: "center",
            width: 150,
            key: "rpaas",
            slot: "rpaas"
          },
          {
            title: "是否开通UAP",
            align: "center",
            width: 150,
            key: "ruap",
            slot: "ruap"
          },
          {
            title: "其他",
            align: "center",
            // width: 120,
            key: "relse",
            slot: "relse"
          },
          {
            slot: 'action',
            align: 'center',
            width: 90,
            renderHeader: (h, index) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      if (!this.ifedit) {
                        this.addRow()
                      }
                    }
                  }
                }, '新增')
              ])
            }
          },
        ],
        roleList: [], //租户列表
        projectList: [], //关联项目列表
        accountInfo: {
          "reqId": 0,
          "projectId": "", //项目id
          "reqDes": "", //申请描述
          "roleId": "", //租户id
          "userId": "1", //用户id
          userName: "测试", //用户名称
          "accountList": [{
            "fourA": "", //4A账号
            "memberName": "", //成员名称
            "rbdi": "0", //是否开通BDI
            "relse": "", //其他
            "rhadoop": "0", //是否开通hadoop
            "rpaas": "0", //是否开通pass
            "ruap": "0" //是否开通UAP
          }],
          files: []
        }
      }
    },
    mounted: function() {
      console.log("this.reqId,this.draftsId---------->", this.reqId, this.draftsId)
      this.userInfo()
      this.getRoleLis()
    },
    methods: {
      //获取用户基本信息
      userInfo() {

      },
      getInfo() {
        return this.childrenInfo
      },
      validate() {
        var isSubmit = false
        this.$refs["accountInfo"].validate((valid) => {
          if (valid) {
            isSubmit = true
          } else {
            this.$Message.error('请填写必填项');
          }
        })
        return isSubmit
      },
      getHandleParams(handleInfo){
        handleInfo.reqSubject = ""
        handleInfo.startTime = 0
        handleInfo.hopeTime = 0
        handleInfo.reqDes = ""
        handleInfo.isEdit = this.isEdit;
        handleInfo.isChangeContent = 0;
		if(!this.ifedit){
		  handleInfo.isChangeContent = 1;
		}
        if (this.isEdit == 1 ) {
          handleInfo.content = this.getInfo()
        }
        console.log("aaaa-------->",this.ifedit, this.isEdit == 1)
      },
      //处理页面获取下一步处理人需要的参数
      getHandleUserParams(opOptions){
        var param = {}
        if(opOptions != ""){
          param.vari = opOptions
        }
        return param
      },
      //获取租户角色
      getRoleLis() {
        var url = this.CONFIG.url_know + "/rolesById"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.roleList = data
          }
        })
      },
      //设置关联项目列表
      setProjectList(roleId) {
        var url = this.CONFIG.url_know + "/projects/" + roleId
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: that.searchInfo,
          success: function(data) {
            that.projectList = data
          }
        })
      },
      addRow() {
        this.accountInfo.accountList.push({
          "fourA": "", //4A账号
          "memberName": "", //成员名称
          "rbdi": 0, //是否开通BDI
          "relse": "", //其他
          "rhadoop": 0, //是否开通hadoop
          "rpaas": 0, //是否开通pass
          "ruap": 0 //是否开通UAP
        })
      },
      deleteRow(row, index) {
        this.accountInfo.accountList.splice(index, 1);
      },
    },
    props: {
      isEdit:{},
      ifedit: {
        type: Boolean,
        default: false,
      },
      reqId: {
        default: null
      },
      draftsId: {
        default: null
      },
      processInfo: {}
    },
  }
</script>
